<template>
  <div class="FooTer" @click="meiu">
   <!-- <div style="width:35px;height:35px;text-align:center;"  >
     <popover  style="margin: 50px;">
      <div slot="content" class="popover-demo-content">
       <a href="">1</a>
       <a href="">2</a>
      </div>
      <button class="btn btn-default"></button>
    </popover>
   </div> -->
    <transition  name="fade">
     <div v-show="show1" class="one">
       <a href="#/">首页</a>
     </div>
    </transition>
    <transition  name="fade">
     <div v-show="show1" class="two">
      <a href="#/paihang">排行</a>
     </div>
    </transition>
    <transition  name="fade">
     <div v-show="show1" class="three">
       <a href="">安利</a>
     </div>
    </transition>
    <transition  name="fade">
     <div v-show="show1" class="four">
       <a href="">个人</a>
     </div>
    </transition>
    <transition  name="fade">
      <div v-show="show1" class="five">
       <a href=""></a>
      </div>
     </transition>
   </div>
 
</template>

<script>
import { Popover } from "vux";
export default {
  data() {
    return {
      show1: false,
      num: 1
    };
  },
  components: {
    Popover
  },
  methods: {
    onShow() {
      console.log("on show");
    },
    onHide() {
      console.log("on hide");
    },
    meiu: function() {
      this.num++;
      if (this.num % 2 == 0) {
        this.show1 = true;
      } else {
        this.show1 = false;
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .popover-demo-content {
  padding: 5px 10px;
} */
.fade-enter {
  opacity: 0.1;
  transform: translateY(-50px);
}

/* 显示/消失过程中的过渡样式 */

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}

/* 定义标签离开之后的结束状态 */

.fade-leave-to {
  opacity: 0.2;
  transform: translateY(100px);
}
.FooTer {
  position: fixed;
  bottom: 5px;
  right: 44%;
  width: 35px;
  height: 35px;
  background: #12a7b4;
  border-radius: 50%;
  opacity: 0.3;
  transition: all 0.5s;
  z-index: 99999999;
}
.FooTer .one a {
  line-height: 33px;
  margin-left: 3px;
  margin-top: 5px;
}
.FooTer .two a {
  line-height: 33px;
  margin-left: 3px;
  margin-top: 5px;
}
.FooTer .three a {
  line-height: 33px;
  margin-left: 4.5px;
  margin-top: 5px;
}
.FooTer .four a {
  line-height: 33px;
  margin-left: 4.5px;
  margin-top: 5px;
}
.FooTer:hover div a {
  opacity: 1;
  color: white;
}
.FooTer .one {
  position: absolute;
  width: 35px;
  height: 35px;
  background: #12a7b4;
  bottom: 33px;
  right: 57%;
  border-radius: 50%;
}
.FooTer .two {
  position: absolute;
  width: 35px;
  height: 35px;
  background: #12a7b4;
  bottom: 33px;
  right: -60%;
  border-radius: 50%;
}
.FooTer .three {
  position: absolute;
  width: 35px;
  height: 35px;
  background: #12a7b4;
  bottom: -3px;
  right: 113%;
  border-radius: 50%;
}
.FooTer .four {
  position: absolute;
  width: 35px;
  height: 35px;
  background: #12a7b4;
  bottom: -3px;
  right: -112%;
  border-radius: 50%;
}
.FooTer .five {
  position: absolute;
  width: 35px;
  height: 35px;
  background: #12a7b4;
  bottom: -37px;
  border-radius: 50%;
}
.FooTer:hover {
  opacity: 1;
}
</style>